<template>
<div class="body">
  <div class="head">
    <h1>创建项目</h1>
  </div>
  <div class="tab">
    <button
      :class="{active: index === currentTab}"
      :key="index"
      v-for="(item, index) in tabs"
      @click="handleClickButton(item, index)"
    ><i class="icon" :class="item.icon"></i><span>{{item.name}}</span></button>
  </div>
  <div class="container">
    <router-view :path="path"
                 @handlePath="handlePath"
                 @handleTabs="handleTabs"
    ></router-view>
  </div>
</div>
</template>

<script>
export default {
  name: 'Create',
  data () {
    return {
      currentTab: 0,
      tabs: [
        {
          name: '创建',
          icon: 'el-icon-circle-plus',
          router: '/project'
        },
        {
          name: '基本',
          icon: 'el-icon-s-tools',
          router: '/basic'
        },
        {
          name: '项目',
          icon: 'el-icon-s-order',
          router: '/item'
        }
      ],
      path: null
    }
  },
  methods: {
    handleClickButton (tab, index) {
      this.currentTab = index
      this.$router.push({ path: tab.router })
    },
    handlePath (path) {
      this.path = path
    },
    handleTabs (index) {
      this.currentTab = index
    },
    handleRouterChange () {
      const currentHash = document.location.hash.replace('#', '')

      for (let i = 0; i < this.tabs.length; i++) {
        if (this.tabs[i].router === currentHash) {
          this.currentTab = i
          break
        }
      }
    }
  },
  created () {
    this.handleRouterChange()
  }
}
</script>

<style scoped lang="less">
.body {
  button {
    cursor: pointer;
    outline: none;
  }
  width: 100%;
  height: 100%;
  .head {
    height: 63px;
    background-color: rgb(187, 230, 214);
    h1 {
      margin: auto;
      width: 300px;
      line-height: 63px;
      font-size: 24px;
      font-weight: 300;
      text-align: center;
    }

  }
  .tab {
    background-color: rgb(187, 230, 214);
    height: 44px;
    display: flex;
    color: rgb(44, 62, 80);
    justify-content:center;
    button {
      width: 98px;
      height: 44px;
      background-color: rgb(187, 230, 214);
      font: 18px Roboto, Avenir, Helvetica, Arial, sans-serif;

      span {
        margin-left: 10px;
      }
    }
    button.active {
      color: #6806c1;
      border-bottom: 3px solid #6806c1 ;
    }
  }
  .container {
    height: 100%;
    margin-bottom: -107px;
    overflow: auto;
    padding-bottom: 107px;
    box-sizing: border-box;
  }
}
</style>
